<template>
  <div class="file-uploader">
    <el-card class="upload-card">
      <template #header>
        <div class="card-header">
          <span>文件上传</span>
        </div>
      </template>

      <el-upload
        class="upload-area"
        drag
        :auto-upload="false"
        :on-change="handleFileChange"
        :show-file-list="false"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽文件到此处或 <em>点击上传</em>
        </div>
      </el-upload>

      <div v-if="selectedFile" class="selected-file">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="文件名">
            {{ selectedFile.name }}
          </el-descriptions-item>
          <el-descriptions-item label="文件大小">
            {{ formatFileSize(selectedFile.size) }}
          </el-descriptions-item>
          <el-descriptions-item label="文件类型">
            {{ selectedFile.type || '未知' }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="upload-options">
          <el-radio-group v-model="uploadOptions.isPublic">
            <el-radio :label="true">公开文件</el-radio>
            <el-radio :label="false">私有文件</el-radio>
          </el-radio-group>

          <el-button
            type="primary"
            @click="handleUpload"
            :loading="uploading"
            :disabled="!selectedFile"
          >
            开始上传
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { UploadFilled } from '@element-plus/icons-vue';
import type { UploadFile } from 'element-plus';
import { ossApi } from '../api/oss';
import type { UploadOptions } from '../types/oss';

const selectedFile = ref<File | null>(null);
const uploading = ref(false);
const uploadOptions = ref<UploadOptions>({
  isPublic: true
});

const handleFileChange = (file: UploadFile) => {
  selectedFile.value = file.raw || null;
};

const handleUpload = async () => {
  if (!selectedFile.value) return;

  try {
    uploading.value = true;
    await ossApi.uploadFile(selectedFile.value, uploadOptions.value);
    ElMessage.success('文件上传成功');
    selectedFile.value = null;
  } catch (error) {
    ElMessage.error('文件上传失败');
    console.error('文件上传失败:', error);
  } finally {
    uploading.value = false;
  }
};

const formatFileSize = (size: number): string => {
  if (size < 1024) {
    return size + ' B';
  } else if (size < 1024 * 1024) {
    return (size / 1024).toFixed(2) + ' KB';
  } else if (size < 1024 * 1024 * 1024) {
    return (size / (1024 * 1024)).toFixed(2) + ' MB';
  } else {
    return (size / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
  }
};
</script>

<style scoped>
.file-uploader {
  margin-bottom: 20px;
}

.upload-card {
  max-width: 600px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.upload-area {
  width: 100%;
}

.selected-file {
  margin-top: 20px;
}

.upload-options {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>